<template>
    <div id="main">
        <el-container>
            <el-header>
                <my-head/>
            </el-header>
            <el-main>
                <el-container>
                    <el-aside  class='my-side'>
                        <my-side/>
                    </el-aside>
                    <el-main class="left-border">
                        <div class='base-main'>
                            <transition name="move" mode="out-in">
                            <router-view></router-view>
                         </transition>
                        </div>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import MySide from "@/components/common/MySide";
import MyHead from "@/components/common/MyHead"

export default {
    
    data(){
        return {

        }
    },
    components: {
        'my-side': MySide,
        'my-head': MyHead
    },
    methods: {
        test(){
            let p = {};
            let url = "/api/member/test";
            this.$http.fetch(url,p)
            .then(res=>{

            })
        }
    },
    mounted(){
        this.test();
    }
}
</script>

<style scoped>
.el-header{
    padding: 0;
    background-color: #66b1ff;
}

.el-main {
    padding: 0;
    height: 100%;
    background-color: #f2f2f2;
}

.el-aside {
    padding: 0;
    background-color: white;
    width: 200px !important;
    height: 100%;
}
#main{
    height: 100%;
}

.el-container{
    height: 100%;
}

.base-main {
    padding: 10px;
}

.my-side {
    overflow-x: hidden;
}

.left-border{

    /* border:1px solid #66b1ff;
    border-bottom-color: rgb(0,0,0,0);
    border-right-color: rgb(0,0,0,0);
    border-top-color: rgb(0,0,0,0); */
}
</style>